<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/view/common/tag.jsp" %>
<head>
    <meta charset="UTF-8"/>
    <title>首页-聊天机器人展览系统</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="${baseurl}/lib/layui/css/layui.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/portal.css">
    <link rel="stylesheet" href="${baseurl}/lib/portal/css/global.css">
</head>
<body>
<jsp:include page="header.jsp">
    <jsp:param name="flag" value="1"></jsp:param>
</jsp:include>
<div class="content index">
    <div class="layui-carousel" id="carousel">
        <div carousel-item="">
                <c:forEach var="item" items="${carousels}" varStatus="i">
                    <div><img src="${item.carouselPath}" alt="${item.carouselDes}"></div>
                </c:forEach>
        </div>
    </div>
    <div class="main-info">
        <div class="teacher-show">
            <div>
                <span class="title layui-panel-title">展览馆信息 | </span>
            </div>
            <div class="teacher-list">
                <ul class="project-list" id="LAY_content"></ul>
                <div style="text-align: center;" id="LAY-page">
                </div>
            </div>
        </div>

    </div>
</div>


<!--footer-->
<jsp:include page="footer.jsp"></jsp:include>

<script id="gallery_tpl" type="text/html">
        {{# layui.each(d, function(index, item){ }}
        <li data-id="{{item.id}}">
            <a class="project-img" href="${baseurl}/portal/exhibitionInfo/galleryDetail?id={{item.id}}">
                <img src="{{item.galleryImage}}" alt="FUN社区">
                <cite class="layui-btn layui-btn-primary layui-btn-small">去参观</cite>
            </a>
            <h2><a href="${baseurl}/portal/exhibitionInfo/galleryDetail?id={{item.id}}">{{item.galleryName}}</a></h2>
            <p class="project-desc">{{item.gallerySummary}}</p>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无家教信息
        {{# } }}
</script>

<script type="text/javascript" src="${baseurl}/lib/layui/layui.js"></script>
<script type="text/javascript" src="${baseurl}/lib/layui_custom/Hlayui.js"></script>
<script>
    layui.use(['carousel', 'element', 'laypage', 'layer', 'form', 'laytpl','util'], function () {
        var $ = layui.jquery;
        var carousel = layui.carousel;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;
        var element = layui.element;
        var util = layui.util;

        //建造实例
        carousel.render({
            elem: '#carousel'
            , width: '100%' //设置容器宽度
            , height: '350px' //设置容器高度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });

        (function() {
            $.get(BaseUrl+'portal/galleryInfo/list', {page: 1, limit: 10}, function (res) {
                renderList(res.data);
                var total = res.count;
                pageColumn(total);
            })
        })();

        /*列表渲染*/
        var renderList = function (data) {
            var getTpl = document.getElementById("gallery_tpl").innerHTML;
            laytpl(getTpl).render(data, function (html) {
                document.getElementById("LAY_content").innerHTML = html;
            });
        }
        /*分页插件渲染*/
        var pageColumn = function (total) {
            laypage.render({
                elem: 'LAY-page'
                , count: total
                , jump: function (obj, first) {
                    if (!first) {
                        getPage(obj.curr, obj.limit);
                    }
                }
            });
        };

        var getPage = function (page, limit) {
            $.get(BaseUrl+'portal/galleryInfo/list', {page: page, limit: limit}, function (res) {
                renderList(res.data);
            })
        }

        //固定Bar
        util.fixbar({
            bgcolor: '#009688'
        });
    });
</script>
</body>
</html>
